<template>
<!--  <div>-->
<!--    <el-container>-->
<!--      <el-header >-->
<!--        <div style="text-align: center; font-size: 25px; font-weight: bolder">-->
<!--          <i class="el-icon-s-home" style="margin-right: 25px"></i>-->
<!--          选课管理系统-->
<!--        </div>-->
<!--      </el-header>-->
<!--      <el-main>-->
<!--        <el-card class="login-module">-->
<!--          <div slot="header" class="clearfix">-->
<!--            <span style="text-align: center; font-size: 20px; font-family: 'Microsoft YaHei'">-->
<!--              <p><i class="el-icon-office-building" style="margin-right: 18px"></i>登陆</p>-->
<!--            </span>-->
<!--          </div>-->
<!--          <div>-->
<!--            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">-->
<!--              <el-form-item label="用户 id" prop="id">-->
<!--                <el-input v-model.number="ruleForm.id" prefix-icon="el-icon-lollipop"></el-input>-->
<!--              </el-form-item>-->
<!--              <el-form-item label="用户密码" prop="password">-->
<!--                <el-input v-model="ruleForm.password" placeholder="请输入密码" show-password prefix-icon="el-icon-ice-cream-round"></el-input>-->
<!--              </el-form-item>-->
<!--              <el-form-item label="用户类型" prop="type">-->
<!--                <el-radio-group v-model="ruleForm.type">-->
<!--                  <el-radio label="student" value="student">学生</el-radio>-->
<!--                  <el-radio label="teacher" value="teacher">老师</el-radio>-->
<!--                  <el-radio label="admin" value="admin">admin</el-radio>-->
<!--                </el-radio-group>-->
<!--              </el-form-item>-->
<!--              <el-form-item>-->
<!--                <el-button type="primary" @click="submitForm('ruleForm')">登陆</el-button>-->
<!--                <el-button @click="resetForm('ruleForm')">重置</el-button>-->
<!--                <el-button @click="test('ruleForm')">test</el-button>-->
<!--              </el-form-item>-->
<!--            </el-form>-->
<!--          </div>-->
<!--        </el-card>-->
<!--      </el-main>-->
<!--    </el-container>-->
<!--  </div>-->
    <div class="login-container">
      <el-container>
        <el-header>
          <div class="header-content">
            <i class="el-icon-s-home" style="margin-right: 25px"></i>
            选课管理系统
          </div>
        </el-header >

        <div class="el-container">
          <el-main class="main-container" >
            <el-card class="login-module">
              <div slot="header" class="clearfix login-header" >
            <span class="login-title">
              <i class="el-icon-office-building" style="margin-right: 18px"></i>
              登陆
            </span>
              </div>
              <div>
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                  <el-form-item label="用户 id" prop="id">
                    <el-input v-model.number="ruleForm.id" prefix-icon="el-icon-lollipop"></el-input>
                  </el-form-item>
                  <el-form-item label="用户密码" prop="password">
                    <el-input v-model="ruleForm.password" placeholder="请输入密码" show-password prefix-icon="el-icon-ice-cream-round"></el-input>
                  </el-form-item>
                  <el-form-item label="用户类型" prop="type">
                    <el-radio-group v-model="ruleForm.type">
                      <el-radio label="student" value="student">学生</el-radio>
                      <el-radio label="teacher" value="teacher">老师</el-radio>
                      <el-radio label="admin" value="admin">admin</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item class="form-actions">
                    <el-button type="primary" @click="submitForm('ruleForm')">登陆</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
<!--                    <el-button @click="test('ruleForm')">test</el-button>-->
                  </el-form-item>
                </el-form>
              </div>
            </el-card>
          </el-main>
        </div>

      </el-container>
    </div>
</template>


<script>
export default {
  data() {
    return {
      ruleForm: {
        id: null,
        password: null,
        type: null,
      },
      rules: {
        id: [
          { required: true, message: '请输入用户 id', trigger: 'blur' },
          { type: 'number', message: '请输入数字', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
      }
    };
  },
  methods: {
    submitForm(formName) {
      const that = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let check = false
          let name = null

          axios.get('http://localhost:10086/info/getCurrentTerm').then(function (resp) {
            sessionStorage.setItem("currentTerm", resp.data)
          })

          axios.get('http://localhost:10086/info/getForbidCourseSelection').then(function (resp) {
            sessionStorage.setItem("ForbidCourseSelection", resp.data)
          })

          if (that.ruleForm.type === 'admin' || that.ruleForm.type === 'teacher') {
            let form = {tid: that.ruleForm.id, password: that.ruleForm.password}
            console.log(form)
            axios.post("http://localhost:10086/teacher/login", form).then(function (resp) {
              console.log("教师登陆验证信息：" + resp.data)
              check = resp.data
              if (check === true) {
                axios.get("http://localhost:10086/teacher/findById/" + that.ruleForm.id).then(function (resp) {
                  console.log("登陆页正在获取用户信息" + resp.data)
                  name = resp.data.tname

                  sessionStorage.setItem("token", 'true')
                  sessionStorage.setItem("type", that.ruleForm.type)
                  sessionStorage.setItem("name", name)
                  sessionStorage.setItem("tid", resp.data.tid)

                  console.log('name: ' + name + ' ' + that.ruleForm.type + ' ' + resp.data.tid)

                  if (that.ruleForm.type === 'admin' && name === 'admin') {
                    that.$message({
                      showClose: true,
                      message: '登陆成功，欢迎 ' + name + '!',
                      type: 'success'
                    });
                    that.$router.push('/admin')
                  }
                  else if(that.ruleForm.type === 'teacher' && name !== 'admin') {
                    that.$message({
                      showClose: true,
                      message: '登陆成功，欢迎 ' + name + '!',
                      type: 'success'
                    });
                    that.$router.push('/teacher')
                  }
                  else {
                    that.$message({
                      showClose: true,
                      message: 'admin 登陆失败，检查登陆类型',
                      type: 'error'
                    });
                  }
                })
              }
              else {
                that.$message({
                  showClose: true,
                  message: '登陆失败，检查账号密码',
                  type: 'error'
                });
              }
            })
          }
          else if (that.ruleForm.type === 'student') {
            let form = {sid: that.ruleForm.id, password: that.ruleForm.password}
            axios.post("http://localhost:10086/student/login", form).then(function (resp) {
              console.log("学生登陆验证信息：" + resp.data)
              check = resp.data
              if (check === true) {
                axios.get("http://localhost:10086/student/findById/" + that.ruleForm.id).then(function (resp) {
                  console.log("登陆页正在获取用户信息" + resp.data)
                  name = resp.data.sname

                  sessionStorage.setItem("token", 'true')
                  sessionStorage.setItem("type", that.ruleForm.type)
                  sessionStorage.setItem("name", name)
                  sessionStorage.setItem("sid", resp.data.sid)

                  that.$message({
                    showClose: true,
                    message: '登陆成功，欢迎 ' + name + '!',
                    type: 'success'
                  });

                  console.log('正在跳转：' + '/' + that.ruleForm.type)

                  // 3. 路由跳转
                  that.$router.push({
                    path: '/' + that.ruleForm.type,
                    query: {}
                  })
                })
              }
              else {
                that.$message({
                  showClose: true,
                  message: '账号密码错误，请联系管理员',
                  type: 'error'
                });
              }
            })
          }
          else {
            console.log("! error type")
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    test(forName) {
      console.log(this.ruleForm)
    }
  }
}
</script>

<style scoped>
/* 设置背景图片 */
.login-container {
  /*
  背景图片
   */
  background: url('https://ts1.cn.mm.bing.net/th/id/R-C.0701ee8920316eaacfc9ed0990635148?rik=G%2b%2b7p2mQYkooxg&riu=http%3a%2f%2fwww.pptbz.com%2fpptpic%2fUploadFiles_6909%2f201406%2f2014062420035560.jpg&ehk=uyVZ1ylTKT%2bvCmd9lb0l3x5xhTmXOq6poLscKE1eeMM%3d&risl=&pid=ImgRaw&r=0') no-repeat center center fixed;
  background-size: cover;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
s
/* 顶部header样式 */
.el-header {
  background-color: rgba(179, 192, 209, 0.8);
  color: #333;
  line-height: 60px;
}

.header-content {
  text-align: center;
  font-size: 25px;
  font-weight: bolder;
  color: #fff;
}

/* 登录框样式 */
.login-module {
  width: 380px;
  background: rgba(255, 255, 255, 0.8); /* 半透明的背景 */
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.login-header {
  text-align: center;
  font-size: 20px;
  font-family: 'Microsoft YaHei', sans-serif;
  color: #333;
}

.login-title {
  display: flex;
  align-items: center;
  font-size: 20px;
  color: #333;
}

/* 输入框样式 */
.el-input {
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.el-radio-group {
  margin-top: 15px;
}

/* 按钮样式 */
.el-button {
  width: 100%;
  border-radius: 5px;
  padding: 10px;
  margin-top: 15px;
}

.el-button[type="primary"] {
  background-color: #42b983;
  border-color: #42b983;
}

.el-button:hover {
  background-color: #388e3c;
  border-color: #388e3c;
}

.el-button + .el-button {
  margin-left: 10px;
}

/* 调整form的间距 */
.form-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

/* 字体大小调整 */
.el-form-item label {
  font-size: 14px;
}

/* 修改登陆提示框的字体样式 */
.el-message {
  font-size: 16px;
}
.el-container {
  display: flex;
  justify-content: center;  /* 水平居中 */
  align-items: center;      /* 垂直居中 */
  height: 100vh;            /* 让容器的高度为 100% 屏幕高度 */
}

.main-container {
  width: 60%;   /* 可以根据需求调整宽度 */
  max-width: 1200px;  /* 最大宽度，避免在大屏幕上过宽 */
}
</style>
